/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
// 1.1 准备查询参数对象
const queryObj = {
  status: '',       // 文章状态：1-待审核   2-审核通过  不传为全部
  channel_id: '',   // 频道 id：不传为全部
  page: 1,          // 当前页码
  per_page: 2       // 当前页面中的展示条数
};
let totalCount = 0; // 文章总条数
// 1.2 获取文章列表数据
async function getActicleList() {
  const res = await axios({
    url: '/v1_0/mp/articles',
    method: 'get',
    params: queryObj
  });
  // 1.3 展示到指定的标签结构中
  const { data } = res;
  totalCount = data.total_count;
  const artListStr = data.results.map(item => `
    <tr>
      <td>
        <img src=${item.cover.type === 0 ? "https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500" : item.cover.images[0]} alt="">
      </td>
      <td>${item.title}</td>
      <td>
        ${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
      </td>
      <td>
        <span>${item.pubdate}</span>
      </td>
      <td>
        <span>${item.read_count}</span>
      </td>
      <td>
        <span>${item.comment_count}</span>
      </td>
      <td>
        <span>${item.like_count}</span>
      </td>
      <td data-id=${item.id}>
        <i class="bi bi-pencil-square edit"></i>
        <i class="bi bi-trash3 del"></i>
      </td>
    </tr>`).join('');
  document.querySelector('.art-list').innerHTML = artListStr;
  document.querySelector('.total-count').innerText = `共${totalCount}条`;
}
getActicleList();


/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// 2.1 设置频道列表数据
async function setChannelList() {
  const { data } = await axios({ url: '/v1_0/channels' });
  const channelListStr = '<option value="" selected="">请选择文章频道</option>' + data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('');
  // 1.2 展示到下拉菜单中
  document.querySelector('.form-select').innerHTML = channelListStr;
}
setChannelList();
// 2.2 监听筛选条件改变，保存查询信息到查询参数对象
document.querySelectorAll('.form-check-input').forEach(radioInput => {
  radioInput.addEventListener('change', e => {
    queryObj.status = e.target.value;
  });
});
document.querySelector('.form-select').addEventListener('change', e => {
  queryObj.channel_id = e.target.value;
});
// 2.3 点击筛选时，传递查询参数对象到服务器
document.querySelector('.sel-btn').addEventListener('click', () => {
  getActicleList();
});


/**
 * 目标3：分页功能
 *  3.1 定义变量保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
// 3.1 定义变量保存并设置文章总条数  ===> 定义在了查询参数下面
// 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', () => {
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    queryObj.page = queryObj.page + 1;  // 当前页码 + 1
    document.querySelector('.page-now').innerText = `第${queryObj.page}页`;
    getActicleList();
  }
});
// 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', () => {
  if (queryObj.page > 1) {
    queryObj.page = queryObj.page - 1;  // 当前页码 - 1
    document.querySelector('.page-now').innerText = `第${queryObj.page}页`;
    getActicleList();
  }
});


/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
// 4.1 关联文章 id 到删除图标 ===> 已在数据渲染是设置服务器返回过来的数据 id 值
// 4.2 点击删除时，获取文章 id
document.querySelector('.art-list').addEventListener('click', async e => {
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id;
    // 4.3 调用删除接口，传递文章 id 到服务器
    const res = await axios({ url: `/v1_0/mp/articles/${delId}`, method: 'delete' });
    // 4.5 删除最后一页的最后一条，需要自动向前翻页
    const children = document.querySelector('.art-list').children;
    if (children.length === 1 && queryObj.page !== 1) {
      queryObj.page = queryObj.page - 1;
      document.querySelector('.page-now').innerText = `第${queryObj.page}页`;
    }
    // 4.4 重新获取文章列表，并覆盖展示
    myAlert(true, '删除文章成功');
    setTimeout(() => getActicleList(), 1500);
  }
});

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', e => {
  if (e.target.classList.contains('edit')) {
    const editId = e.target.parentNode.dataset.id;
    location.href = `../publish/index.html?id=${editId}`;
  }
});